<template>
  <div>
    <dt-modal-edit
      ref="edit"
      title="案场承接配置"
      :width="900"
      @ok="onOk"
      :labelWidth="130"
      :handelBtn="handelBtn"
      @onHandel="clearEdit"></dt-modal-edit>
    <Modal v-model="clearModal" title="清空所有承接" width="300" :transfer="true">
      该操作将清空案场所有的承接配置，是否确认?
      <div slot="footer">
        <Button @click="onClose">取消</Button>
        <Button type="primary" @click="onConfirm" :disabled="timeFlag">
          确定
          <span v-if="timeFlag">({{ time }}s)</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import editOpt from '../biz/caseReceiverEdit.js'
  import apiMgr from '@/biz/caseReceiver/index'

  export default {
    data() {
      return {
        info: {},
        OldInfo: {
          buildingId: '',
          buildingName: '',
          housesName: '',
          hfFlag: false,
          bdFlag: false,
          channelLabel: '投放渠道配置',
          hfChannel: '',
          bdChannel: '',
          hfIds: '',
          bdIds: ''
        },
        handelBtn: {
          type: 'warning',
          handelFlag: false,
          handelText: '清空所有承接'
        },
        clearModal: false,
        time: 5,
        timeFlag: true
      }
    },

    methods: {
      onOk(data) {
        let params = {
          ...data,
          bdFlag: data.bdFlag ? 1 : 0,
          hfFlag: data.hfFlag ? 1 : 0,
          hfIds: data.hfIds.replace(/，/g, ','),
          bdIds: data.bdIds.replace(/，/g, ','),
          createId: this.$dt.userInfo().userId,
          updateId: this.$dt.userInfo().userId
        }
        return apiMgr.buildingUndertakingConfig(params).then(() => {
          this.$Message.success('配置成功')
          this.$emit('success')
          this.$refs.edit.hide()
        })
      },
      getInit(id) {
        if (id) {
          apiMgr
            .caseConfigByBuildingId({ buildingId: id })
            .then((res) => {
              res.hfFlag = res.hfFlag == 1 ? true : false
              res.bdFlag = res.bdFlag == 1 ? true : false
              this.info.housesName = res.buildingName
              this.info = { ...this.info, ...res }
              this.$refs.edit.show(editOpt.options(this), this.info)
            })
            .catch(() => {
              this.info = this.OldInfo
              this.$refs.edit.show(editOpt.options(this), this.info)
            })
        } else {
          this.info = this.OldInfo
          this.$refs.edit.show(editOpt.options(this), this.info)
        }
      },
      show(val) {
        this.info = this.OldInfo
        if (val.type == 'add') {
          this.handelBtn.handelFlag = false
          this.$refs.edit.show(editOpt.options(this), this.info)
        } else {
          this.getInit(val.buildingId)
          if (val.caseInCount || val.adviserCount) {
            this.handelBtn.handelFlag = true
          }
        }
      },
      onClose() {
        this.clearModal = false
      },
      onConfirm() {
        this.clearModal = false
        apiMgr.clearAllUndertakings({ buildingId: this.info.buildingId, type: '0' }).then(() => {
          this.$Message.success('关闭成功')
          this.$emit('success')
          this.$refs.edit.hide()
        })
      },
      clearEdit(info) {
        this.time = 5
        this.timeFlag = true
        this.clearModal = true
        let timeout = setInterval(() => {
          this.time--
          if (this.time == 0) {
            this.timeFlag = false
            clearInterval(timeout)
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clear-btn {
    font-size: 20px;
    text-align: center;
  }
</style>
